<template>
  <div class="cart">
    <!-- 顶部nav -->
    <NavBar title="购物车"></NavBar>
    <div class="content">
      <van-swipe-cell v-for="item in shopList" :key="item.id">
        <van-card
          :price="(item.shopPrice / 100).toFixed(2)"
          :origin-price="(item.price / 100).toFixed(2)"
        >
          <template #title>
            <div @click="$router.push('/shopdetails/' + item.id)">{{ item.name }}</div>
          </template>
          <template #tag>
            <van-checkbox v-model="item.state"/>
          </template>
          <template #thumb>
            <van-image
              width="80"
              height="80"
              radius="4px"
              :src="API.BASE_SERVER_URL + item.defaultImg"
              @click.stop="item.state = !item.state"
            />
          </template>
          <template #num>
            <van-stepper v-model="item.quantity"
            theme="round"
            button-size="22"
            disable-input
            @minus="sub(item.id, item.quantity)"
            @plus="add(item.id, item.quantity)"
            />
          </template>
        </van-card>
        <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="remove(item.id)"/>
        </template>
      </van-swipe-cell>
      <!-- 结算部分 -->
      <van-submit-bar
      :price="qprice"
      :disabled="btnDisabled"
      button-text="提交订单"
      @submit="submit"
      >
        <van-checkbox v-model="checked" >全选</van-checkbox>
      </van-submit-bar>
    </div>
    <Tabbar />
  </div>
</template>
<script>
export default {
  data () {
    return {
      shopList: [{ state: true }],
      userId: 0
    }
  },
  methods: {
    // 获取购物车数据
    async loadData () {
      const { data: res } = await this.$post(this.API.API_URL_CART, {
        userId: this.userId
      })
      res.productList.forEach(item => item.state = false)
      this.shopList = res.productList
    },
    // 减少购物车商品数量
    async sub (id, val) {
      await this.$post(this.API.API_URL_CART_ITEMS_UPDATE, {
        userId: this.userId,
        cartItemList: [{ productId: id, quantity: -val }]
      })
    },
    // 增加购物车商品数量
    async add (id, val) {
      await this.$post(this.API.API_URL_CART_ITEMS_UPDATE, {
        userId: this.userId,
        cartItemList: [{ productId: id, quantity: +val }]
      })
    },
    // 移除商品出购物车
    async remove (id) {
      const { data: res } = await this.$post(this.API.API_URL_CART_ITEMS_REMOVE, {
        userId: this.userId,
        productId: id
      })
      if (res.length !== 0) {
        this.shopList.some((item, i) => {
          if (item.id === id) {
            this.shopList.splice(i, 1)
            return true
          }
        })
      }
    },
    getUserId () {
      this.userId = localStorage.getItem('userId')
      if (!this.userId) this.$router.push('/login')
    },
    async submit () {
      // 获取被选中的商品信息
      const arr = []
      this.shopList.filter(item => {
        if (item.state) arr.push({ productId: item.id, quantity: item.quantity })
      })
      const res = await this.$post(this.API.API_URL_CART_COMMIT, {
        orderItemList: arr,
        userId: this.userId
      })
      if (res.length !== 0) {
        await arr.forEach(item => this.remove(item.productId))
        this.$router.push('/payment')
      }
    }
  },
  created () {
    this.getUserId()
    this.loadData()
  },
  computed: {
    // 计算被选中的商品价钱
    qprice () {
      const val = this.shopList.filter(item => item.state).reduce((amt, item) => {
        amt += item.shopPrice * item.quantity
        return amt
      }, 0)
      if (!val) return 0 // 防止出现NaN, 上面的商品价格我就不处理了
      return val
    },
    // 全选与全不选
    checked: {
      get () {
        if (this.shopList.length === 0) return false
        return this.shopList.every(item => item.state)
      },
      set() {
        if (this.checked) {
          this.shopList.forEach(item => {
            item.state = false
          })
        } else {
          this.shopList.forEach(item => {
            item.state = true
          })
        }
      }
    },
    // 提交按钮禁用
    btnDisabled () {
      if (this.shopList.length === 0) return true
      return !this.shopList.some((item, i) => {
        if (item.state === true) {
          return true
        }
      })
    }
  }
}
</script>
<style scoped>
  .content {
    text-align: left;
    padding-bottom: 50px;
  }
  .goods-card {
      margin: 0;
      background-color: #fff;
    }
    .delete-button {
      height: 100%;
    }
    .van-submit-bar {
      bottom: 50px;
    }
</style>
